<template>
  <div>
    <el-container>
      <!-- 左边侧边栏 -->
      <el-aside width="auto">
        <!-- <el-row class="tac"> -->
        <el-col :span="12">
          <el-menu
            default-active="2"
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose"
            background-color="#324157"
            text-color="#C0CBD9"
            router
            active-text-color="#20A0FF"
            :unique-opened="true"
            style="height: 100vh"
            :collapse="isCollapse"
            :collapse-transition="true"
          >
            <!-- 首页 -->
            <el-menu-item index="/FirstPage">
              <i class="el-icon-s-home"></i>
              <span>首页</span>
            </el-menu-item>
            <!-- 子路由页面 -->
            <el-submenu v-for="item in menus" :key="item.id" :index="item.path">
              <template slot="title">
                <i :class="item.icon"></i>
                <span>{{ item.name }}</span>
              </template>
              <el-menu-item-group>
                <el-menu-item
                  v-for="item in item.child"
                  :key="item.id"
                  :index="item.path"
                  >{{ item.name }}</el-menu-item
                >
              </el-menu-item-group>
            </el-submenu>
          </el-menu>
        </el-col>
        <!-- </el-row> -->
      </el-aside>
      <!-- 顶部导航栏和主要内容的父级标签 -->
      <el-container>
        <el-header>
          <!-- 控制侧边栏显示隐藏的图标 -->
          <el-radio-group
            v-model="isCollapse"
            :style="isCollapse ? 'transform:rotate(180deg)' : ''"
          >
            <i class="el-icon-s-fold" @click="show"></i>
          </el-radio-group>
          <div class="control">
            <!-- 首页 -->
            <el-breadcrumb
              separator-class="el-icon-arrow-right"
              v-if="$route.path == '/FirstPage'"
            >
              <el-breadcrumb-item>首页</el-breadcrumb-item>
            </el-breadcrumb>
            <el-breadcrumb
              separator-class="el-icon-arrow-right"
              v-if="$route.path != '/FirstPage'"
            >
              <!-- 面包屑渲染的内容 -->
              <el-breadcrumb-item :to="{ path: '/FirstPage' }"
                >首页</el-breadcrumb-item
              >
              <el-breadcrumb-item
                v-for="(item, index) in sideList"
                :key="index"
                >{{ item.name }}</el-breadcrumb-item
              >
            </el-breadcrumb>
            <div style="display: flex; justify-content: space-between">
              <div class="iocn_right_pic">
                <!-- 全屏 -->
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="全屏"
                  placement="top"
                  @click.native="handleFullScreen"
                >
                  <img src="../assets/全屏.png" />
                </el-tooltip>
                <!-- 换肤 -->
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="换肤"
                  placement="top"
                >
                  <el-color-picker v-model="color"></el-color-picker>
                </el-tooltip>
                <!-- 中英文切换 -->
                <el-dropdown>
                  <el-tooltip
                    class="item"
                    effect="dark"
                    content="中英文切换"
                    placement="top"
                  >
                    <img src="../assets/中英文切换.png" class="pic_En" />
                  </el-tooltip>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item>中文</el-dropdown-item>
                    <el-dropdown-item>English</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </div>
              <!-- 首页，退出 -->
              <el-dropdown>
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="中英文切换"
                  placement="top"
                >
                  <span class="item_span"></span>
                  <img src="../assets/实心正方形.png" />
                </el-tooltip>
                <el-dropdown-menu slot="dropdown">
                  <router-link to="/FirstPage" class="routerlink">
                    <el-dropdown-item>首页</el-dropdown-item>
                  </router-link>
                  <el-dropdown-item @click.native="turns"
                    >退出登录</el-dropdown-item
                  >
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </div>
        </el-header>
        <!-- 主要内容 -->
        <el-main>
          <!-- 新增标签tabs -->
          <div class="tags-view-container" v-if="showTags">
            <el-scrollbar
              ref="scrollContainer"
              class="scroll-container"
              @wheel.native.prevent="handleScroll"
              style="width: 1200px"
            >
              <div class="tags">
                <ul>
                  <li
                    class="tags-li"
                    v-for="(item, index) in tagsList"
                    :class="{ active: isActive(item.path) }"
                    :key="index"
                    @contextmenu.prevent="openMenu($event, item, index)"
                  >
                    <router-link :to="item.path" class="tags-li-title">
                      {{ item.title }}
                    </router-link>
                    <span class="tags-li-icon" @click="closeTags(index)">
                      <i class="el-icon-close"></i>
                    </span>
                  </li>
                </ul>
              </div>
            </el-scrollbar>
            <ul
              class="contextmenu"
              v-show="visible"
              :style="{ left: left + 'px', top: top + 'px' }"
            >
              <li @click="refreshSelectedTag(rightClickItem)">刷新</li>
              <li @click="close">关闭</li>
              <li @click="closeOther">关闭其他</li>
              <li @click="closeAll">关闭所有</li>
            </ul>
          </div>
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>


<script>
export default {
  data() {
    return {
      // 自定义颜色
      color: "#409EFF",
      // 自定义颜色
      colors: "",
      // 侧边栏展开或者收起
      isCollapse: false,
      // 侧边栏tab列表
      sideList: [],
      // tabs标签
      tagsList: [],
      // 右键点击事件
      top: 0,
      left: 0,
      // 右键
      visible: false,
      // 刷新
      rightClickItem: "",
      // 右键点击事件的下标
      index: "",
      menus: [
        {
          id: "2",
          name: "运营管理",
          icon: "el-icon-s-marketing",
          path: "#3",
          child: [
            {
              id: "2-1",
              name: "订单管理",
              path: "/OrderManagement",
            },
            {
              id: "2-2",
              name: "评论管理",
              path: "/comments",
            },
            {
              id: "2-3",
              name: "运费模板管理",
              path: "/FreightTemplate",
            },
          ],
        },
        {
          id: "3",
          name: "商品管理",
          icon: "el-icon-s-shop",
          path: "#4",
          child: [
            {
              id: "3-1",
              name: "商品列表",
              path: "/Goods",
            },
            {
              id: "3-2",
              name: "商品类目",
              path: "/category",
            },
          ],
        },
        {
          id: "4",
          name: "推广管理",
          icon: "el-icon-coin",
          path: "#5",
          child: [
            {
              id: "4-1",
              name: "商铺广告",
              path: "/BusinessAdvertising",
            },
            {
              id: "4-2",
              name: "推荐管理",
              path: "/RecommendedManagement",
            },
            {
              id: "4-3",
              name: "优惠券管理",
              path: "/CouponManagement",
            },
            {
              id: "4-4",
              name: "商铺信息",
              path: "/StoreInformation",
            },
          ],
        },
        {
          id: "5",
          name: "系统管理",
          icon: "el-icon-s-tools",
          path: "#6",
          child: [
            {
              id: "5-1",
              name: "会员管理",
              path: "/MemberManagement",
            },
            {
              id: "5-2",
              name: "管理员",
              path: "/Controllor",
            },
            {
              id: "5-3",
              name: "角色管理",
              path: "/RoleManagement",
            },
          ],
        },
      ],
    };
  },

  watch: {
    // 观察visible的变化，来触发关闭右键菜单，调用关闭菜单的方法
    visible(value) {
      if (value) {
        document.body.addEventListener("click", this.closeMenu);
      } else {
        document.body.removeEventListener("click", this.closeMenu);
      }
    },
    //监听
    $route(newValue) {
      this.getBreadcrumb();
      this.setTags(newValue);
    },
  },
  // 创建后
  created() {
    // 首次进入页面tab显示首页
    if (window.performance.navigation.type == 1) {
      //this.$router.push('/FirstPage')
    } else {
      this.$router.push("/FirstPage");
    }
    this.getBreadcrumb();
    this.setTags(this.$route);
  },
  methods: {
    // 点击退出
    turns() {
      this.Cookie.remove("token");
      this.$router.go(0);
      // this.$router.replace('/?returnUrl=' + this.$route.fullPath)
    },
    // 右键菜单刷新
    refreshSelectedTag(router) {
      this.$router.push({
        path: "/Refresh",
        query: {
          path: router.path,
          name: router.title,
        },
      });
    },
    // 右键关闭
    close() {
      let index = this.index;
      let len = this.tagsList.length;
      if (index >= 1) {
        this.$router.push({
          path: this.tagsList[index - 1].path,
        });
      } else {
        if (len == 1) {
          this.$router.push({
            path: "/FirstPage",
          });
        } else {
          this.$router.push({
            path: this.tagsList[index + 1].path,
          });
        }
      }
      this.tagsList.splice(index, 1);
    },
    // tab标签页横向滑动
    handleScroll(e) {
      let eventDeltea = e.wheelDelta || -e.deltaY * 40;
      let $scrollWrapper = this.$refs.scrollContainer.$refs.wrap;
      $scrollWrapper.scrollLeft = $scrollWrapper.scrollLeft + eventDeltea / 4;
    },
    // 右键菜单
    openMenu(e, item, index) {
      this.index = index;
      this.rightClickItem = item;
      let x = e.pageX;
      let y = e.pageY;
      this.top = y;
      this.left = x;
      this.visible = true;
    },
    closeMenu() {
      this.visible = false;
    },
    // 关闭单个标签
    closeTags(index) {
      let delItem = this.tagsList.splice(index, 1)[0];
      let item = this.tagsList[index]
        ? this.tagsList[index]
        : this.tagsList[index - 1];
      if (item) {
        delItem.path === this.$route.fullPath && this.$router.push(item.path);
      } else {
        this.$router.push("/FirstPage");
      }
    },
    // 关闭全部标签
    closeAll() {
      this.tagsList = [];
      this.$router.push("/FirstPage");
    },
    // 关闭其他标签
    closeOther() {
      let curItem = this.tagsList.filter((item) => {
        return item.path === this.$route.fullPath;
      });
      this.tagsList = curItem;
    },
    // 设置标签
    setTags(route) {
      if (this.$route.path == "/Refresh") {
        return;
      }
      let isExist = this.tagsList.some((item) => {
        return item.path === route.fullPath;
      });
      if (!isExist) {
        if (this.tagsList.length >= 12) {
          this.tagsList.shift();
        }
        if (this.$route.path == "/FirstPage" || this.$route.path == "/") {
          this.tagsList.push({
            title: "首页",
            path: "/FirstPage",
          });
        } else {
          this.tagsList.push({
            title: route.meta.title,
            path: route.fullPath,
          });
        }
      }
    },
    // 路由path返回
    isActive(path) {
      return path === this.$route.fullPath;
    },
    // 头像的下拉框点击首页跳转到首页页面
    turnon() {
      this.$router.push("/FirstPage");
    },
    isHome(route) {
      return route.name === "home";
    },
    // 面包屑赋值
    getBreadcrumb() {
      let matched = this.$route.matched;
      this.sideList = matched;
    },
    // 控制侧边栏缩进
    show() {
      this.isCollapse = !this.isCollapse;
      if (this.isCollapse) {
        this.sidewin = "200px";
      } else {
        this.sidewin = "64px";
      }
    },
    // 全屏
    handleFullScreen() {
      let element = document.documentElement;
      if (this.fullscreen) {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        }
      } else {
        if (element.requestFullscreen) {
          element.requestFullscreen();
        } else if (element.webkitRequestFullScreen) {
          element.webkitRequestFullScreen();
        } else if (element.mozRequestFullScreen) {
          element.mozRequestFullScreen();
        } else if (element.msRequestFullscreen) {
          // IE11
          element.msRequestFullscreen();
        }
      }
      this.fullscreen = !this.fullscreen;
    },
    // 侧边栏点击显示当前下标
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
  },
  computed: {
    showTags() {
      return this.tagsList.length > 0;
    },
  },
};
</script>

<style scoped lang="less">
// 页面的头部导航栏
.el-header {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
}
// 页面左边侧边栏
.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  line-height: 200px;
}
// 页面主要内容
.el-main {
  background-color: #fff;
  color: #333;
  padding: 0;
}
// 页面容器
body > .el-container {
  margin-bottom: 40px;
}
// 侧边栏的宽度
.el-col-12 {
  width: 100%;
  text-align: initial;
}
// 侧边栏连接处的空隙
.el-menu /deep/ .el-menu-item-group__title {
  padding: 0;
}
// 侧边栏
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
// 控制侧边栏显示隐藏的图标
.el-icon-s-fold {
  width: 20px;
  height: 100%;
  line-height: 50px;
  font-size: 20px;
  cursor: pointer;
  text-align: left;
}
// 顶部导航栏
.el-header {
  padding: 0;
  text-align: left;
}
// 面包屑间距
.el-radio-group {
  padding: 0 15px;
  height: 100%;
}
// 侧边栏和面包屑
.el-breadcrumb {
  width: 250px;
  line-height: 50px;
}
// 顶部导航栏父级标签
.el-header {
  display: flex;
  align-items: center;
  line-height: 0;
  background-color: white;
  // justify-content: space-between;
  border-bottom: 1px solid gray;
}
.iocn_right_pic img {
  padding-left: 15px;
  padding-right: 15px;
}
.iocn_right_pic {
  height: 100%;
  width: 164px;
}
.el-breadcrumb {
  height: 100%;
}
.control {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
}
.routerlink {
  text-decoration: none;
}
.tags {
  white-space: nowrap;
  width: 100%;
  position: relative;
  height: 30px;
  overflow: hidden;
  background: #fff;
  border-top: 1px solid #f1f1f1;
  border-bottom: 1px solid #f1f1f1;
}

.tags ul {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  margin: 0;
}

.tags-li {
  width: 75px;
  height: 23px;
  float: left;
  color: #666;
  font-size: 12px;
  line-height: 23px;
  border-radius: 3px;
  background: #fff;
  overflow: hidden;
  cursor: pointer;
  padding: 0 5px 0 12px;
  vertical-align: middle;
  margin: 3px 5px 2px 3px;
  border: 1px solid #e9eaec;
  -webkit-transition: all 0.3s ease-in;
  -moz-transition: all 0.3s ease-in;
  transition: all 0.3s ease-in;
}
.tags-li a {
  text-decoration: none;
}

.tags-li.active {
  color: #fff;
  background: #0badf9;
}

.tags-li-title {
  float: left;
  color: #666;
  max-width: 80px;
  overflow: hidden;
  margin-right: 5px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.tags-li.active .tags-li-title {
  color: #fff;
}

.tags-view-container {
  width: 100%;
  height: 35px;
  background: #fff;
  border-bottom: 1px solid #d8dce5;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 0 3px 0 rgba(0, 0, 0, 0.04);
}
.contextmenu {
  z-index: 2;
  color: #333;
  padding: 5px 0;
  font-size: 12px;
  position: absolute;
  background: #fff;
  border-radius: 5px;
  list-style-type: none;
  box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);
}
.contextmenu li {
  margin: 0;
  padding: 7px 16px;
  cursor: pointer;
}
.contextmenu li:hover {
  background: #eee;
}
.el-main /deep/ .tags-view-container{
  position: relative;
  z-index: 10;
}

</style>

   